Pointing devices指標裝置

使用者喜歡指標裝置帶來的精確性和靈活性。使用者在 Mac 上導航 App 和系統時,通常希望將指標裝置與鍵盤結合使用。在 iPad 和 Apple Vision Pro 上,指標裝置在並未替代觸控、眼睛或手勢的情況下,為使用者提供了一種與 App 和內容互動的額外方式。

最佳實踐

響應滑鼠和觸控板手勢時保持一致性。使用者希望大多數手勢在整個系統中都能發揮相同的作用,無論他們使用的是什麼 App 或遊戲。例如,在 Mac 上,無論是瀏覽單個文稿頁面、網頁還是影象,使用者都依賴於“在頁面之間輕掃”手勢來發揮相同的作用。

避免重新定義系統範圍的觸控板手勢。即使是在一款以自定義方式使用 App 特定手勢的遊戲中,使用者也希望能夠使用系統範圍的手勢;例如,在 macOS 中,使用者希望透過熟悉的手勢來顯示程式塢或排程中心。別忘了 Mac 使用者可以自定義手勢來執行系統範圍的操作。

無論使用者是使用手勢、眼睛、指標裝置還是鍵盤,請在你的 App 中提供一致的使用體驗。使用者期望在多種輸入型別之間流暢地切換,他們不想為每一種模式或所使用的每一款 App 學習不同的互動方式。

讓使用者使用指標來顯示和隱藏可自動最小化或淡出的控制。例如,在 iPadOS 中,使用者可以將指標放在最小化的 Safari 瀏覽器工具欄上來顯示它(移走指標時,工具欄會再次最小化)。觀看全螢幕影片時,使用者還可以移動指標來顯示或隱藏播放控制。

使用者按住修飾鍵並與 App 中的物件互動時,提供一致的使用體驗。例如,如果使用者可以透過按住 Option 鍵拖移物件來複制該物件,那麼無論他們使用觸控還是指標進行拖移,應確保結果一致。

iPadOS

iPadOS 基於傳統指標體驗而構建,可自動調整指標以適應當前環境,並精確提供了豐富的視覺反饋,從而提高了生產率並簡化了觸控屏裝置上的常見任務。iPadOS 指標系統為使用者提供了一種與 App 和內容互動的額外方式,它不會取代觸控。

必要時允許在自定義檢視中進行多重選擇。在 iPadOS 15 及更高版本中,使用者可以點按並將指標拖過多個專案來選擇它們。當使用者以這種方式使用指標時,它會展開成一個可見的矩形並選擇其中所包含的專案。標準的非列表集合檢視預設支援此類互動;如果想在自定義檢視中支援多重選擇,那麼你需要自行實現。

僅當有價值時,才區分指標輸入和手指輸入。例如,當使用者使用指標時,滑動條可為他們提供一種額外的方法在影片中定位。在這種情況下,使用者可以使用指標或觸控來拖移播放頭,但他們也可以使用指標來點按一個確切的目的位置。

指標形狀和內容效果

iPadOS 整合了指標及其停留的元素的外觀和行為,將焦點移至指標所指的專案。你可以支援系統提供的指標效果,也可以修改效果以適合你的使用體驗。

指標的形狀預設為圓形,不過當使用者將指標移到特定元素或區域上時,它可以顯示系統定義的形狀或自定義形狀。例如,當使用者將指標移到文字輸入區上方時,指標會自動使用熟悉的工字型形狀。

使用內容效果後,當使用者將指標放在使用者介面元素或區域上時,指標下方的元素或區域也可以改變其外觀。取決於內容效果的型別,指標可以保留其當前形狀或轉換為與元素的新外觀融為一體的形狀。

iPadOS 定義了三種可聚焦 App 中不同型別的互動元素的內容效果:高亮標記、提升和懸停。

高亮標記效果會將指標轉換為半透明的圓角矩形,作為控制的背景幷包含輕微的視差。輕微的高亮標記和移動可聚焦控制而不分散使用者執行任務時的注意力。iPadOS 預設會為欄按鈕、標籤頁欄、分段控制和編輯選單應用高亮標記效果。

提升效果結合了輕微的視差和升高外觀,讓元素看起來像是懸浮在螢幕上。當指標在元素下方淡出時,iPadOS 會將元素放大,同時在其下方新增陰影並在頂部新增柔和的鏡面高光,從而產生提升的錯覺。iPadOS 預設會為 App 圖示和控制中心內的按鈕應用提升效果。

懸停是一種通用的效果,當指標移到元素上時,可以為該元素應用自定義的縮放、著色或陰影值。懸停效果結合了你的自定義值聚焦某個專案,但它不會轉換預設的指標形狀。

指標配件

指標配件為視覺指示符,可幫助使用者瞭解該如何使用指標來與當前的使用者介面元素互動。例如,接近可調整大小元素的指標可能會顯示小箭頭,表示該元素允許沿某一個軸調整大小。

與指標形狀和內容效果不同,配件是可以與任何指標結合以傳遞額外資訊的輔助專案。

使用清晰且簡單的影象來建立自定義配件。指標配件很小,因此有必要建立一個不使用過多細節來表示指標互動的影象。

考慮使用配件過渡來表示元素狀態或行為的改變。除了動畫展現指標配件的出現和消失,系統還會動畫展現可伴隨內容效果的配件形狀及位置之間的過渡。例如,你可以透過將指標配件從plus符號過渡到circle.slash符號來表示新增操作不可用。

指標磁吸

iPadOS 透過使元素像是在吸引指標來幫助使用者使用指標定位該元素。將指標移近某個元素或者將指標快速移向某個元素時,使用者就能體驗到這種磁吸效果。

當使用者將指標移近某個元素時,指標一到達該元素的點選區域系統就會開始轉換指標的形狀。由於元素的點選區域通常會超出其可見邊界,因此指標在似乎接觸到元素本身之前就開始轉換,從而產生元素正在將指標吸向它的錯覺。

當使用者將指標快速移向某個元素時,iPadOS 會檢查指標的軌跡以發現最有可能為目標的元素。當指標的路徑中存在元素時,系統會利用磁吸將指標吸向該元素的中心。

iPadOS 預設會為使用提升效果(如 App 圖示)和高亮標記效果(如欄按鈕)的元素應用磁吸,但使用懸停效果的元素除外。由於支援懸停的元素不會轉換預設的指標形狀,因此新增磁吸可能會產生不協調感,讓使用者覺得失去了對指標的控制。

系統還會為文字輸入區應用磁吸,如果使用者在選擇文字時無意中進行了垂直移動,它可以幫助使用者避免跳到另一行。

標準指標和效果

儘可能支援系統提供的內容效果。使用者很快就會習慣他們在整個系統中看到的內容效果,並且通常希望這種體驗適用於所使用的每一款 App。為了提供一致的使用者體驗,請根據每種效果的設計意圖來調整互動方式。具體而言:

為標準按鈕和文字輸入區優先使用系統提供的指標外觀。指標以使用者期望的方式執行可以幫助他們更輕鬆地使用你的 App。

在互動式元素的四周新增內邊距來建立可輕鬆訪問的點選區域。你可能需要進行試驗來確定元素點選區域的合適大小。如果點選區域過小,使用者會覺得在與元素互動時必須格外精確。另一方面,當元素的點選區域過大時,使用者會覺得將指標拉離該元素很費勁。一般來說,在包含外框的元素四周新增約 12 點的內邊距效果很好;對於沒有外框的元素,在元素的可見邊緣四周新增約 24 點的內邊距效果很好。

為自定義欄按鈕建立連續點選區域。如果欄中相鄰按鈕的點選區域之間有間隔,當指標在按鈕之間移動而短暫地復原到預設形狀時,使用者的注意力可能會被分散。

指定接收提升效果的非標準元素的圓角半徑。使用系統提供的提升效果,指標在淡出時會轉換以匹配元素的形狀。指標預設使用系統定義的圓角半徑轉換為圓角矩形。如果元素是圓形等其他形狀,那麼你需要提供半徑以便指標可以無縫動態轉換為元素的形狀。

自定義指標

為與標準元素行為類似的自定義元素優先使用系統提供的指標效果。自定義元素與標準元素行為類似時,使用者通常希望使用熟悉的指標互動方式進行互動。例如,如果自定義導航欄中的按鈕不使用標準高亮標記效果,那麼使用者可能會覺得按鈕已損壞。

在整個 App 中使用一致的指標效果。例如,如果你的 App 用於幫助使用者繪圖,請在 App 的所有繪圖區提供相似的指標體驗,以便使用者可以將他們對某個區的認知沿用到其他區。

避免建立不必要的指標和內容效果。使用者會注意到指標的外觀或它下面的使用者介面元素何時發生了變化,並希望這些變化有用。建立一個沒有任何實際價值的純裝飾性指標效果會分散使用者的注意力甚至是激怒他們。

自定義指標形狀應保持簡單。理想情況下,指標的形狀代表著使用者在當前環境中可以執行的操作,且自身不會引起過多的注意。如果使用者不能立即理解你的自定義指標形狀,他們可能會浪費時間去嘗試發現形狀的含義。

考慮透過顯示提供有用資訊的自定義註解來增強指標使用體驗。例如,當使用者將指標放在 App 的繪圖區域上時,你可以顯示 X 和 Y 值。Keynote 講演使用註解來顯示可調整大小影象的當前寬度和高度。

避免透過指標顯示指導性文字。顯示指導性文字的指標會讓 App 變得複雜且難用。與其提供指導,不如把介面的清晰和簡潔放在首位,以便使用者可以快速掌握如何使用你的 App,無論他們是使用指標還是觸控螢幕。

在定義自定義懸停效果時,考慮陰影、縮放和元素間距的相互作用。一般來說,為那些在放大時不會擠到附近元素的元素保留縮放功能。例如,縮放不太適用於表格行,因為行無法在不與相鄰行重疊的情況下展開。對於周圍空間很小的元素,應考慮使用包含著色但不包含縮放和陰影的懸停效果。請注意,使用不包含縮放的陰影效果不佳,因為未縮放的元素即使在其陰影暗示它被提升至螢幕上方時也不會顯得更接近觀看者。

macOS

macOS 支援各種使用者可自定義的一系列標準滑鼠和觸控板互動。例如,當點按或手勢不是與內容互動的主要方式時,使用者通常可以根據當前的工作流程來開啟或關閉它。使用者還可以選取滑鼠或觸控板的特定區域來呼叫輔助點按,併為某些手勢選擇特定的手指組合和動作。

點按或手勢預期行為滑鼠觸控板
首選點按選擇或啟用專案,如檔案或按鈕。
輔助點按顯示關聯選單。
滾動上、下、左、右移動檢視內的內容。
智慧縮放放大或縮小內容,如網頁或 PDF。
在頁面之間輕掃向前或向後導覽單獨顯示的頁面。
在全螢幕顯示的 App 之間輕掃向前或向後導覽全螢幕顯示的 App 和空間。
排程中心(雙指輕點兩下滑鼠或者三指或四指在觸控板上向上輕掃)啟用排程中心。
查詢和資料檢測器(單指用力點按或者三指輕點)在所選內容上方顯示查詢視窗。
輕點來點按使用輕點而非點按執行首選點按操作。
用力點按點按,然後用力地按下以在所選內容上方顯示“快速檢視”視窗或查詢視窗。施加可變數的壓力來影響壓敏式控制,如變速媒體控制。
放大或縮小(雙指開合)放大或縮小。
旋轉(雙指做圓周運動)旋轉內容,如影象。
通知中心(從觸控板邊緣輕掃)顯示通知中心。
App Exposé(三指或四指向下輕掃)在 Exposé 中顯示當前 App 的視窗。
啟動臺(捏合拇指和其他三指)顯示啟動臺。
顯示桌面(張開拇指和其他三指)移走所有視窗以顯示桌面。

指標

macOS 提供了各種標準指標樣式,可供 App 用於傳達介面元素的互動狀態或者拖移操作的結果。

箭頭(Arrow):標準指標,用於選擇和與內容或介面元素互動。

閉合手(Closed hand):表示可以拖動以重新定位檢視中的內容,例如在地圖應用中拖動地圖檢視。

上下文選單(Contextual menu):表示下方內容有上下文選單可用,通常按住Control鍵時顯示此指標。

十字線(Crosshair):表示可以進行精確的矩形選擇,例如在圖片檢視器中選擇影象部分。

消失的專案(Disappearing item):表示拖動的專案在放置後會消失,原始專案不會受影響。

拖動複製(Drag copy):在按住Option鍵的情況下進行拖動,放置後會複製專案,而不是移動原專案。

拖動連結(Drag link):在拖動操作中建立專案的別名,按住Option和Command鍵時出現,放置後建立指向原始檔案的別名。

水平 I 游標(Horizontal I beam):表示可以在水平佈局中選擇或插入文字,例如在文字編輯器中。

開放手(Open hand):表示可以拖動以重新定位檢視中的內容。

操作不允許(Operation not allowed):表示當前拖動的專案無法在此位置放置。

指向手(Pointing hand):表示下方的內容是一個連結,通常用於網頁或文件中的URL連結。

向下調整大小(Resize down):表示可以調整視窗或元素的大小,使其向下移動或縮放。

向左調整大小(Resize left):表示可以調整視窗或元素的大小,使其向左移動或縮放。

左右調整大小(Resize left/right):表示可以調整視窗或元素的大小,使其向左或向右移動或縮放。

向右調整大小(Resize right):表示可以調整視窗或元素的大小,使其向右移動或縮放。

向上調整大小(Resize up):表示可以調整視窗或元素的大小,使其向上移動或縮放。

上下調整大小(Resize up/down):表示可以調整視窗或元素的大小,使其向上或向下移動或縮放。

垂直 I 游標(Vertical I beam):表示可以在垂直佈局中選擇或插入文字。

visionOS

在 visionOS 中,使用者可以外接指標裝置或鍵盤,並在繼續使用其眼睛和手部的同時使用這兩種裝置。如果使用者注視某個元素,然後移動指標,系統會聚焦到指標下方的元素。你的 App 無需執行任何操作來支援這種行為。

連線指標裝置後,使用者注視的區域決定了指標的上下文。例如,當使用者的視線從一個視窗移至另一個視窗時,指標的上下文會無縫轉換到新視窗。

當使用者使用所連線支援手勢的指標裝置(如觸控板或滑鼠)時,指標會在使用者使用手勢時隱藏,從而儘量減少視覺干擾。在這種情形下,指標一直處於隱藏狀態,直至使用者移動後重新出現在使用者注視的位置。